<template>
  <div>
    <def-layout type="col0-24" :page="page" @invoke="invoke">
      <div slot="search" class="form-items">
        <el-form-item>
          <el-input v-model="formSearch.keyword" placeholder="运单号" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.driverName" placeholder="驾驶员" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.logisticsOrderStatus" placeholder="请选择状态">
            <el-option
              v-for="item in constants.logisticsOrderStatus.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.isArchive" placeholder="请选择归档状态">
            <el-option
              v-for="item in constants.isArchive.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.originType" placeholder="请选择来源类型">
            <el-option
              v-for="item in constants.originType.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.creatorId" placeholder="请选择车源类型">
            <el-option
              v-for="item in constants.carSource.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.lineType" placeholder="请选择行使类型">
            <el-option
              v-for="item in constants.lineType.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formSearch.createTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="创建开始日期"
            end-placeholder="创建结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="$constants.pickerOptions"
          />
        </el-form-item>
        <el-form-item>
          <form-area v-model="formSearch.startAreaIds" placeholder="发货地" :def-show="true" :change-on-select="true" :level="3" />
        </el-form-item>
        <el-form-item>
          <form-area v-model="formSearch.endAreaIds" placeholder="目的地" :def-show="true" :change-on-select="true" :level="3" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.pageNo" placeholder="纸厂单号" />
        </el-form-item>
      </div>
      <div slot="content" class="grid">
        <page-grid v-if="self!=null" :parent="self">
          <div slot="columns">
            <el-table-column prop="no" align="center" label="运单号" width="150" />
            <el-table-column prop="pageNo" align="center" label="纸厂单号" width="150" />
            <el-table-column prop="startArea" align="center" label="发货地" width="150" />
            <el-table-column prop="endArea" align="center" label="目的地" width="180" />
            <el-table-column prop="lineType" align="center" label="运输类型" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.lineType" type="lineType" @click="filter" />
                <!-- <label v-if="scope.row.lineType ===0">直达</label>
                <label v-else type="warning">回头</label> -->
              </template>
            </el-table-column>
            <el-table-column prop="creatorId" align="center" label="车源" width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.creatorId != constants.otherCarId">自营车</el-tag>
                <el-tag v-else type="warning">外调车</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="originType" align="center" label="来源类型" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.originType" type="originType" @click="filter" />
              </template>
            </el-table-column>
            <el-table-column prop="expensesExists" align="center" label="是否已创建支出单" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.expensesExists" type="expensesExists" />
              </template>
            </el-table-column>
            <el-table-column prop="driverName" align="center" label="驾驶员" width="100" />
            <el-table-column prop="creator" align="center" label="创建人" width="100" />
            <el-table-column prop="status" align="center" label="运作状态" width="150">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.status" type="logisticsOrderStatus" @click="filter" />
              </template>
            </el-table-column>
            <el-table-column prop="isEmpty" align="center" label="是否空车单" width="100">
              <template slot-scope="scope">
                <label v-if="scope.row.isEmpty ==0 || scope.row.isEmpty===null">否</label>
                <label v-if="scope.row.isEmpty ==1" type="warning">是</label>
              </template>
            </el-table-column>

            <el-table-column prop="createTime" sortable align="center" label="创建时间" width="150" />
            <el-table-column prop="updateTime" sortable align="center" label="更新时间" width="150" />
          </div>
        </page-grid>
      </div>
    </def-layout>
  </div>
</template>
<script>
import adminSupport from 'lola-admin-support-el'
export default {
  name: 'Transport',
  components: {},
  mixins: [adminSupport.mixins.index],
  data() {
    return {
      name: 'Transport',
      formSearch: { keyword: '', locked: '', createTime: [], logisticsOrderStatus: null, pageNo: '' },
      self: null,
      paramsStatus: null // 路由参数
    }
  },
  watch: {},
  created() {
    const that = this
    const status = that.$route.params.status
    this.paramsStatus = status
    console.log('路由参数status = ' + status)
    this.init() // 页面自定义初始化
  },
  methods: {
    init() {
      var that = this
      this.loadedParams()
      that.loadData() // 加载数据(按钮+列表) 扩展需重写该方法
      this.self = that
      // this.dataGrid.params.queryList.push({
      //     key: 'o.isArchive',
      //     value: 0,
      //     oper: '=',
      //     join: 'and'
      // })
      if (that.paramsStatus != null && that.paramsStatus !== undefined && that.paramsStatus !== ':status') {
        that.search()
      }
    },
    search() {
      const queryList = []
      this.loadedParams()
      if (!String.isNullOrEmpty(this.formSearch.keyword)) {
        queryList.push({
          key: 'o.no',
          value: this.formSearch.keyword,
          oper: ':',
          join: 'and'
        })
      }
      if (!String.isNullOrEmpty(this.formSearch.driverName)) {
        queryList.push({
          key: 'd.realName',
          value: this.formSearch.driverName,
          oper: ':',
          join: 'and'
        })
      }
      if (
        !String.isNullOrEmpty(this.formSearch.originType) &&
        this.formSearch.originType !== 'All'
      ) {
        queryList.push({
          key: 'o.originType',
          value: this.formSearch.originType,
          oper: '=',
          join: 'and'
        })
      }
      if (
        !String.isNullOrEmpty(this.formSearch.isArchive) &&
                this.formSearch.isArchive !== 'All'
      ) {
        queryList.push({
          key: 'o.isArchive',
          value: this.formSearch.isArchive,
          oper: '=',
          join: 'and'
        })
      }
      if (
        !String.isNullOrEmpty(this.formSearch.logisticsOrderStatus) &&
        this.formSearch.logisticsOrderStatus !== 'All'
      ) {
        queryList.push({
          key: 'o.status',
          value: this.formSearch.logisticsOrderStatus,
          oper: '=',
          join: 'and'
        })
      }
      if (
        !String.isNullOrEmpty(this.formSearch.lineType) &&
        this.formSearch.lineType !== 'All'
      ) {
        queryList.push({
          key: 'o.lineType',
          value: this.formSearch.lineType,
          oper: '=',
          join: 'and'
        })
      }
      if (
        !String.isNullOrEmpty(this.formSearch.creatorId)
      ) {
        queryList.push({
          key: 'o.creatorId',
          value: this.$constants.otherCarId,
          oper: this.formSearch.creatorId === 'w' ? '=' : '!=',
          join: 'and'
        })
      }
      if (!String.isNullOrEmpty(this.formSearch.startAreaIds)) {
        queryList.push({ 'key': 'o.startAreaIds', 'value': this.formSearch.startAreaIds, 'oper': ':', 'join': 'and' })
      }
      if (!String.isNullOrEmpty(this.formSearch.endAreaIds)) {
        queryList.push({ 'key': 'o.endAreaIds', 'value': this.formSearch.endAreaIds, 'oper': ':', 'join': 'and' })
      }
      if (this.formSearch.createTime !== null && this.formSearch.createTime.length > 0) {
        queryList.push({ 'key': 'o.createTime', 'value': this.formSearch.createTime[0], 'oper': '>=', 'join': 'and' })
        queryList.push({ 'key': 'o.createTime', 'value': this.formSearch.createTime[1], 'oper': '<=', 'join': 'and' })
      }
      if (!String.isNullOrEmpty(this.formSearch.pageNo)) {
        queryList.push({ 'key': 'o.pageNo', 'value': this.formSearch.pageNo, 'oper': ':', 'join': 'and' })
      }

      this.dataGrid.params.queryList = queryList
      this.refresh()
    },
    bindSearch() {
      this.formSearch = { keyword: '', originType: '', createTime: [], logisticsOrderStatus: null }
    },
    // 加载路由参数
    loadedParams() {
      var that = this
      var status = this.paramsStatus
      if (status !== undefined) {
        const map = that.$constants.logisticsOrderStatus.values()
        // console.log(map.get('value'))
        const arr = [...map]
        arr.forEach(val => {
          if (val.value === parseInt(status)) {
            that.formSearch.logisticsOrderStatus = val.value
          }
        })
        // setTimeout(() => {
        //   that.search()
        // }, 1500)
      }
    }

  }
}
</script>
